.w{
    width: 1400px;
    margin: 0 auto;
}
img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
p{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.poll{
    width: 800px;
    margin: 0 auto;
    height: 300px;
}
.selectedType{
    background: #ff9966;  /* fallback for old browsers */    
    background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));  /* Chrome 10-25, Safari 5.1-6 */     
     background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
     color: #ffffff;
}
.singerList{
    margin-top: 130px;
   
   .top-banner{
      
       height: 400px;
       background: url('../../assets/images/bf43df77823e573da1e65f46a8d8d39e.jpg');
       background-position: top center;
       position: relative;
       background-attachment: fixed ;
       background-size: cover;
      .top-title{
          width: 494px;
          height: 60px;
          background: url('../../assets/images/singer_tit.png') no-repeat;
          background-position: 0 0;
          position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
      }
   }
   main{
       margin-top: 40px;
     overflow: hidden;
     padding: 0 0 70px 0;
       .singerList-box{
           padding-bottom: 100px;
        .changSingerType{
            font-size: 14px;
            color: gray;
            .singerType,.areaType,.letterType{
                height: 60px;
                line-height: 60px;
            }
            .letterType{
                display: flex;
                flex-wrap: wrap;

            }
            ul{
                li{
                    float: left;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 20px;
                    padding: 0 20px;
                    cursor: pointer;
                    margin-right: 5px;
                    &:hover{
                     background: #ff9966;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                        color: #ffffff;
                    }
                }
                }
            }
            .singerBox{
                margin-top: 50px;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                .singerItem{
                    width: 150px;
                    height: 180px;
                    text-align: center;
                    cursor: pointer;
                    margin: 20px;
                    .img-box{
                        width: 150px;
                        height: 150px;
                    }
                    .content-box{
                        p{
                            font-size: 15px;
                         
                            color: #3a3a3a;
                            margin: 10px 0;
                        }
                        span{
                            font-size: 14px;
                            color: red;
                        }
                    }
                }
            }
        }
       }
   }
